<template>
	<view class="content uni-flex-column">
		<CustomNavBar class="navbar" bgColor="#fff">
			<template v-slot:left>
				<view class="back uni-flex uni-align-center uni-justify-center" @click="goBack">
					<uni-icons type="left" size="20"></uni-icons>

				</view>
			</template>
			<template v-slot:center>
				<view class="uni-flex uni-align-center uni-justify-center">
					<view>消息通知</view>
					<image :src="`${$ImgBaseUrl}msgClear-icon.png`" mode="aspectFill" class="clear"></image>

				</view>
			</template>

		</CustomNavBar>
		<z-paging ref="pagingRef" :fixed="false" v-model="dataList" @query="queryList" class="pagingCon">
			<view class="notice-card">
				<uni-card :is-full="true" :border="false" :title="false" padding="0">
					<view class="card-header">
						<view class="header-left">
							<view class="img-bg">
								<image :src="`${$ImgBaseUrl}robot.png`" mode="aspectFill" class="robot"></image>
							</view>
							<view class="card-title">零付平台</view>
						</view>
						<view class="card-time">4月8日 12:23:34</view>
					</view>
					<view class="card-content-wrapper">
						<text class="card-content-title">零付平台防诈提醒通知</text>
						<text class="card-content-text">
							尊敬的平台用户：近期网络诈骗手段层出不穷，为确保您的财产安全及个人信息安全，平台特此发布防诈提示，请您仔细阅读并提高警惕：并提高警惕：…
						</text>
					</view>
					<template v-slot:actions>
						<view class="card-actions">
							<text class="left">查看详情</text>
							<uni-icons type="right" size="15" color="#666"></uni-icons>
						</view>
					</template>
				</uni-card>
			</view>


			<!-- 空状态提示 -->
			<template #empty>
				<view class="empty-view">暂无数据</view>
			</template>
		</z-paging>

	</view>

</template>
<script setup>
	import CustomNavBar from "@/components/custom-navbar/index.vue";
	import {
		ref,
		onMounted,
		onUnmounted,
		nextTick
	} from "vue";
	import {
		queryMessageList
	} from "@/api/message";
	const dataList = ref([]);
	const pagingRef = ref(null);

	const queryList = async (pageNum, pageSize) => {
		console.log(pageNum, pageSize);
		try {
			// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			// 这里的pageNum和pageSize会自动计算好，直接传给服务器即可
			const params = {
				pageNum: pageNum,
				pageSize,
			};
			// 模拟请求服务器获取分页数据，请替换成自己的网络请求
			const res = await queryMessageList(params);
			// // 将请求的结果数组传递给z-paging
			pagingRef.value?.complete(res.rows || []);
		} catch (error) {
			console.error("请求失败:", error);
			// 如果请求失败写 pagingRef.value?.complete(false)
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写 uni.$emit('z-paging-error-emit') 即可
			pagingRef.value?.complete(false);
		}
	};
	// 返回
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	};
</script>
<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background: #F5F5F5;

		.pagingCon {
			flex: 1;
			overflow-y: auto; // 添加滚动以防内容溢出
		}

		.navbar {
			.clear {
				width: 28rpx;
				height: 26rpx;
				margin: 0 20rpx;
			}
		}

		/* 卡片样式 */
		.notice-card {
			margin: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
		}

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.header-left {
				display: flex;
				align-items: center;

				.img-bg {
					padding: 10rpx;
					box-sizing: border-box;
					background: linear-gradient(180deg, #DBEBFF 0%, #A7CEFF 100%);
					border-radius: 100%;
					width: 48rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 10rpx;

					.robot {
						width: 37rpx;
						height: 32rpx;
					}
				}

				.card-title {
					font-size: 30rpx;
					font-weight: 400;
					color: #1E3145;
				}
			}


			.card-time {
				font-weight: 400;
				font-size: 24rpx;
				color: #999;
			}
		}

		.card-content-wrapper {
			padding: 20rpx;

			.card-content-title {
				display: block;
				font-weight: 500;
				font-size: 30rpx;
				color: #333;
				margin-bottom: 20rpx;
			}

			.card-content-text {
				display: block;
				font-size: 26rpx;
				color: #666;
				line-height: 1.5;
			}
		}

		::v-deep .card-actions {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			height: 45px;
			border-top: 1px #eee solid;
			padding: 0rpx 20rpx;

			.left {
				font-size: 24rpx;
				font-weight: 400;
				color: #333;
			}
		}
	}
</style>